<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :visible="visible"
    :width="800"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-form layout="vertical">
      <a-row :gutter="24" :wrap="true">
        <a-col :span="12">
          <a-form-item label="合同编号">
            <a-input class="w-100p" :value="content.contract_number" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="租客名称">
            <a-input class="w-100p" :value="content.owner_name" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="应收时间">
            <a-date-picker
              class="w-100p"
              :value="content.receivable_payment_date"
              :valueFormat="dateFormatStr"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="账单类型">
            <a-select
              :value="content.bill_type"
              :options="billTypeList"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="费用类型" v-bind="validateInfos.cost_type">
            <a-select
              v-model:value="modelRef.cost_type"
              placeholder="请选择费用类型"
              :options="costTypeList"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计费周期" v-bind="validateInfos.range_date">
            <a-range-picker
              class="w-100p"
              v-model:value="modelRef.range_date"
              :value-format="dateFormatStr"
              :disabled-date="disabledDate"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="应收金额"
            v-bind="validateInfos.receivable_payment"
          >
            <a-input-number
              class="w-100p"
              placeholder="请输入应收金额"
              v-model:value="modelRef.receivable_payment"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="账单备注" v-bind="validateInfos.remark">
            <a-textarea
              placeholder="请输入"
              :auto-size="{ minRows: 3 }"
              v-model:value="modelRef.remark"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="closeModal">取消</a-button>
        <a-button type="primary" @click.prevent="onSubmit"> 保存 </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, watch, reactive, toRefs, computed, ref } from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store";
import moment from "moment";
import { Form, message } from "ant-design-vue";
const useForm = Form.useForm;
const dateFormatStr = "YYYY-MM-DD";

export default defineComponent({
  name: "SubBillAdd",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    content: {
      type: Object,
      default: () => {
        return {
          title: "新增账单",
        };
      },
    },
  },
  setup(props, context) {
    const title = computed(
      () => `新建${props.content.bill_type == 1 ? "收" : "付"}款子账单`
    );

    const disabledDate = (current) => {
      return current && current < moment().subtract(1, "days").endOf("day");
    };

    const closeModal = () => {
      context.emit("cancel");
    };

    const onSubmit = () => {
      validate().then(() => {
        const { content } = props;
        const params = {
          ...modelRef,
          contract_id: content.contract_id,
          bill_id: content.id,
          owner_id: content.owner_id,
          bill_type: content.bill_type,
          receivable_payment_date: content.receivable_payment_date,
          needMsg: true,
        };
        params.start_date = params.range_date[0];
        params.end_date = params.range_date[1];
        delete params.range_date;
        request.post("/org", "/bill/addSubBill", params).then((res) => {
          message.success(res.msg);
          context.emit("success");
        });
      });
    };

    const state = reactive({
      loading: false,
      costTypeList: [],
      billTypeList: [],
    });

    const modelRef = reactive({
      cost_type: undefined,
      receivable_payment: "",
      range_date: [],
      remark: "",
    });

    const ruleRef = ref({
      cost_type: [{ required: true, message: "必选" }],
      range_date: [{ required: true, message: "必选" }],
      receivable_payment: [{ required: true, message: "必填" }],
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, ruleRef);

    const init = () => {
      store.dispatch("BillInit").then((data) => {
        state.costTypeList = data.cost_type;
        state.billTypeList = data.bill_type;
      });
    };

    const reset = () => {
      resetFields();
    };

    watch(
      () => props.visible,
      (visible) => {
        if (visible) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      ...toRefs(state),
      title,
      dateFormatStr,
      modelRef,
      validateInfos,
      closeModal,
      onSubmit,
      disabledDate,
    };
  },
});
</script>
